常见视图
文本视图
- Text
- Label
- TextField
- SecureField
- Link
- TextEditor
排版视图
- VStack
- HStack
- ZStack
- Group
- Spacer
- Divider
- EmptyView
绘图视图
- Image
- Rantangle
- RoundedRantangle
- Circle
- Capsule
- Ellipse
控制视图
- Toggle
- Button
- Picker
- Slider
- Stepper
- DatePicker
- Context Menu
- ProgressView
- Map
层级视图
- TabView
- ScrollView
- NavigationView
- Modal
- ActionSheet
- Alert
信息视图
- List
- Grid
- ForEach
- GroupBox
- Form
特殊视图
- 仪表 Gague (watchOS)
- 侧边栏 SiderBar (iPadOS、macOS)
- 颜色选择器 ColorPicker (iOS、iPadOS、macOS)
- 菜单 Menu (iOS、iPadOS、macOS)
- 可调分割视图 HSplitView (macOS)
修改器
修改器的顺序在 SwiftUI 中将极为重要,使用完全相同的修改器,若顺序不同,则带来的结果可能截然不同。
基础文本修改器
字体.font ()
- 动态字体大小:
.title
.title2
.headline
.body
.footnote
- 系统字体:
.system(size:, weight: , design: .rounded).
design: default/rounded/serif/monospaced - 导入字体:
.custom("LGFW", size:)
- 字重:
.fontWeight(.light)
ultraLight/thin/light/regular/medium/semibold/bold/heavy - 加粗:
.blod()
- 倾斜:
.italic()
- 下划线:
.underline()
- 删除线:
.strikethrough()
- 大小写:
.textCase(.none)
uppercase/none/lowercase
字间距及排版修改器
- Tracking:
.tracking(5)
两个字或字母之间,在不添加空格的情况下默认预留的距离。 - Kerning:
.kerning(5)
特定字符之间的关系,若单独预留完整的空间,则在视觉上显得预留的位置过大。 - 基线偏移:
.baselineOffset(10)
,数字表示基线向上或向下偏移的像素个数。
长文本相关修改器
- 限制字数行数:
.lineLimit(5)
- 设置文本省略模式,调整长文本的省略号出现的位置:
.truncationMode(.middle)
head/middle/tail - 长文本行中间预留的距离:
.lineSpacing(10.0)
- 允许缩紧字间距:
.allowsTightening(true)
- 字体缩放:
.minimumScaleFactor(0.5)
- 调整多行文本对齐方式:
.multilineTextAlignment(.leading)
leading/center/trailing
文本框相关修改器
- 文本框外形风格:
.textFieldStyle(DefaultTextFieldStyle)
DefaultTextFieldStyle/RoundedBorderTextFieldStyle - 自动大小写:
.autocapitalization(.sentences)
word/sentences - 自动纠错开关:
.disableAutocorrection(true)
- 联想内容类型:
.textContentType()
UITextContentType | Apple Developer Documentation - 键盘类型:
.keyboard(.emailAddress)
UIKeyboardType | Apple Developer Documentation
布局修改器
- 指定大小的框架修改器:
.frame()
- 锁定尺寸:
.fixedSize()
指的是尽一切可能保留理想大小的 idealWidth、idealHeight。即便剩余空间无法放下本视图,那本视图也应该争取自身的利益,与其它视图争取,各退一步平分空间。 - 边缘留白:
.padding(.bottom, 20)
一般情况下,该留白区域大小由 swiftUI 自行决定。 leading/trailing/top/bottom/vertical/horizontal 代表不同位置的留白。 - 忽略安全区:
ignoresSafeArea()
希望让设备不要接管键盘弹出区域,可以忽略该区域,自动让出视图位置。 (键盘覆盖了视图).edgesIgnoreingSafeArea([.leading, .trailing, .top, .bottom])
:忽略四周的安全区域 - 隐藏:
.hidden()
隐藏视图,占据位置。EmptyView
空视图默认不占据空间。 - 转化为占位符:
.redacted(reason: .placeholder)
当数据没有载入好时,可以使用修改器将数据自动转化为占位符。类似骨架屏。
自定义修改器
图片修改器
- 可变尺寸:
.resizable()
仅支持图片,用途是告诉 SwiftUI 这张图片的大小可以修改,若无额外说明,应占用视图空间将其显示出来。 - 填充方式:
.scaledToFit()
保持缩放比,让图片完全显示在视图区域中。.scaledToFill()
保持缩放比,让图片完全填充满整个视图区域。 - 长宽比:
.aspectRatio(3, contentMode: .fit)
修改长宽比和填充方式,3 位是长宽比。 fit/fill - 图片尺寸:
.imageScale(.large)
专用于修改 SF Symbols 这类图标尺寸的修改器。 large/medium/small - 蒙版:
.clipShape(Circle())
前景、背景处理
- 前景色:
.foregroundColor(.black)
对任意视图来说,谁是视图的主体内容,谁就拥有前景色。 - 背景:
.background(SomeView())
背景修改器允许你为背景添加任何视图。 - 覆盖:
.overlay(SomeView(), alignment: .bottom)
将另一个视图覆盖在原有视图之上。alignment 跟着的是新视图与原有视图的位置关系。
颜色
- 自定义颜色:
Color(red: 100, green: 100, blue: 0)
Color("name")
- 渐变色:
LinearGradient(gradient: [.white, .blue], startPoint: .topLeading, endPoint: .bottomTrailing)
线性渐变;RadialGradient(gradient: colors, center: .center, startRadius: 1, endRadius: 100)
圆形渐变;AngularGradient(gradient: colors, center: .center)
弧形渐变
效果修改器
- 边框:
.border(Color.green, width: 3)
视图本身矩形,添加边框为矩形。.strokeBorder(Color.green, lineWidth: 3)
为视图中所显示的内容添加边框。 - 旋转:
.rotationEffect(.degrees(15))
将原有视图顺时针旋转 15 度 - 缩放:
.scaleEffect(0.6)
将原有视图缩放至之前的 0.6 倍 - 3D 旋转:
.rotataion3DEffect(.degrees(30), axis: (x: 0, y: 1, z: 0))
- 圆角:
.cornerRadius(10)
- 阴影:
.shadow(radius: 10, x:10, y:10)
- 透明度:
.opacity(0.1)
- 磨砂:
.blur()
手势
基础手势
- 长按:
.onLongPressGesture {}
- 轻点:
.onTabGesture {}
复杂手势
对于任意复杂手势来说,最常见的用法是新建一个变量代表你想要的手势,并将该变量放入 .gesture()
修改器中,以此来对视图增加该手势的支持。
手势优先级
在 SwiftUI 的手势系统中,若存在父级视图和子级视图都包含手势识别器的情况时,系统总会优先识别子视图中的手势。
提高手势优先级:由 .gesture()
改为 .highPriorityGesture()
。